<template>
  <el-row>
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <div slot="header" class="clearfix" >
        <span>衍天循环攻略三部曲：从断火到科学断火</span>
      </div>
      <br>
      <el-button style="margin-left: 3%" type="primary" @click="goPage('https://www.jx3box.com/bps/21851')">第一篇：衍天PVE入门向，有手就行系列</el-button><br><br>
      <el-button style="margin-left: 3%" type="primary" @click="goPage('https://www.bilibili.com/video/BV1n5411A76H/')">第二篇：衍天PVE进阶向，半手动处理卦象循环细节(有语音讲解，声音较小，推荐戴耳机放大音量)</el-button><br><br>
      <el-button style="margin-left: 3%" type="primary" @click="goPage('https://www.jx3box.com/bps/23497')">第三篇：衍天PVE花活向，从断火到科学断火</el-button><el-button style="margin-left: 3%" type="primary" @click="goPage('https://www.bilibili.com/video/BV1Pg411j7g6')">完整催眠版衍天手法进阶视频</el-button><br><br>
      <br>
    </el-card>

    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <img src="../pve/image/山水循环.jpg" height="800" width="1018" class="image">
      <img src="../pve/image/火山循环 PLANA.jpg" height="800" width="1018" class="image">
      <img src="../pve/image/火山循环 PLANB.jpg" height="800" width="1018" class="image">

<!--      <img src="../pve/image/method.jpg" height="800" width="1018" class="image">-->

    </el-card>

  </el-row>
</template>

<script>
  export default {
    name: 'method',
    methods:{
      goPage (url) {
        window.open(url,"_blank");
      }
    }
  }
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 80%;
    height: 80%;
    display: block;
    object-fit: cover
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
